<template>
  <div>
    <div>
      <van-nav-bar
        title="收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        :fixed="true"
        :border="false"
      />
    </div>
    <div class="container">
        <van-checkbox-group class="card-goods">
          <van-checkbox class="card-goods__item" v-for="item in list" :key="item.id" :name="item.id" icon-size="0">
            <van-card class="card"
              :title="item.game.title"
              :desc="item.game.brief"
              :price="item.game.price"
              :thumb="item.game.image"
            >
              <div slot="footer" :pid="item.id">
                <van-button size="mini" class="delbtn" @click.stop="delbtn(item.id)">删除</van-button>
              </div>

            </van-card>
            <van-divider />
          </van-checkbox>
        </van-checkbox-group>
    </div>
  </div>
</template>

<script>

import api from "../api/api_pro";
export default {
inject: ['reload'],
  name: "like",
  data() {
    return {
      value: '',
      list: [],
      title: "收藏",
      token: JSON.parse(localStorage.getItem("access-user")),
    };
  },

  mounted() {
    this.$emit("toparent", this.title);
    let token = JSON.parse(localStorage.getItem("access-user"));

    console.log(token.data.id);
    let params = {

      u_id: this.token.data.id,

    };
    api.collectionList(params).then(res => {
      console.log(res);
      this.list = res.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    delbtn(id){
      console.log(id);
        let params={
            id:id
        }
        api.deleteCollection(params).then(res=>{
            console.log(res);
            this.reload();
            this.$toast("删除成功");
            // location.reload
        })
    },
  }
};
</script>

<style scoped>
.delbtn{
      position: absolute;
      right: 5px;
      bottom: -3px;
  }
.card{
    margin:0;
    padding: 0;
    width: 310px;
}
.van-card__title {
    margin-top: 9% !important;
    max-height: 0.888889rem;
    font-weight: 500;
    line-height: 0.444444rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-goods {
  margin-top: 50px;
  margin-left: 12px;

  background-color: #fff;
}
.van-checkbox__label {
  width: 100%;

  height: auto;

  padding: 0 10px 0 15px;

  box-sizing: border-box;
}
.van-checkbox__icon .van-icon {
    display: block;
    margin-left: 10px !important;
    margin-top: -15px !important;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    color: transparent;
    font-size: .8em;
    line-height: inherit;
    text-align: center;
    border: 0.027778rem solid #e5e5e5;
    -webkit-transition: .2s;
    transition: .2s;
}
.van-card__price {
  color: #f44;
}
</style>
